<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-card class="box-card">
      <!-- 表单 -->
      <div class="timeBox">
        <el-form ref="form" :model="form" :rules="Rules" label-width="170px">
          <!-- sip服务器ip -->
          <el-form-item label="sip服务器ip" prop="registration_server">
            <el-input v-model="form.registration_server"></el-input>
          </el-form-item>
          <!-- sip服务器ip -->
          <el-form-item label="Sip服务器端口" prop="registration_server_port">
            <el-input v-model="form.registration_server_port"></el-input>
          </el-form-item>
          <!-- 发起方ID -->
          <el-form-item label="发起方ID" prop="user_id">
            <el-input v-model="form.user_id"></el-input>
          </el-form-item>
          <!-- 发起方密码 -->
          <el-form-item label="发起方密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <!-- 接收方ID -->
          <el-form-item label="接收方ID" prop="call_id">
            <el-input v-model="form.call_id"></el-input>
          </el-form-item>
          <!-- 播报内容类型 -->
          <el-form-item label="播报内容类型" prop="cont_type">
            <el-input v-model="form.cont_type" placeholder="0是文字播报;  1是路径播报;"></el-input>
          </el-form-item>
          <!-- 播报内容/播报文件路径 -->
          <el-form-item label="播报内容/播报文件路径" prop="content">
            <el-input v-model="form.content"></el-input>
          </el-form-item>
          <!-- 播报内容/播报文件路径 -->
          <el-form-item label="语速倍数">
            <el-input v-model="form.speed"></el-input>
          </el-form-item>
          <!-- 播报内容/播报文件路径 -->
          <el-form-item label="音色">
            <el-input v-model="form.voice_type"></el-input>
          </el-form-item>
          <!-- 请求按钮 -->
          <div class="sipButton">
            <el-button type="primary" @click="getSip('form')"
              >测试发送sip请求</el-button
            >
             <el-button  icon="el-icon-refresh-left" @click="reset">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { sendSipData } from "@/api/sip";
import { Message } from "element-ui";
export default {
  name: "Dashboard",
  data() {
    return {
      intervalId: "",
      options: [
        {
          value: 1000,
          label: "1秒",
        },
        {
          value: 5000,
          label: "5秒钟",
        },
        {
          value: 10000,
          label: "10秒",
        },
      ],
      // 定时参数
      form: {
        registration_server: "",
        registration_server_port: "",
        user_id: "",
        password: "",
        call_id: "",
        cont_type: "",
        content: "",
        speed: "",
        voice_type: "",
      },
      // 定时参数必填规则
      Rules: {
        registration_server: [
          { required: true, message: "sip服务器不能为空", trigger: "blur" },
        ],
        registration_server_port: [
          { required: true, message: "Sip服务器端口不能为空", trigger: "blur" },
        ],
        user_id: [
          { required: true, message: "发起方ID不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "发起方密码不能为空", trigger: "blur" },
        ],
        call_id: [
          { required: true, message: "接收方ID不能为空", trigger: "blur" },
        ],
        cont_type: [
          { required: true, message: "播报内容类型不能为空", trigger: "blur" },
        ],
        content: [
          {
            required: true,
            message: "播报内容/播报文件路径不能为空",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    async getSip(formName) {
      let resvalidate;
      // 获取表单校验布尔值
      this.$refs[formName].validate((valid) => {
        res = resvalidate;
      });
      // 判断
      if (res === false) {
        return;
      }
      // 判断
      if (this.value === "") {
        Message.error("请选择时间");
        return;
      }

      const res = await sendSipData(this.form);

      Message.success("发送sip成功");
    },
    reset(){
      this.form = {
        registration_server: "",
        registration_server_port: "",
        user_id: "",
        password: "",
        call_id: "",
        cont_type: "",
        content: "",
        speed: "",
        voice_type: "",
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.sipButton{
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
